<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>数据集管理</span>
                <input type="file" @change="uploadDataset">
                <el-button @click="submitUpload" style="float: right; padding: 3px 0" type="text">
                    添加数据集
                </el-button>

                <!-- Form -->
                <el-dialog title="添加数据集" :visible.sync="dialogFormVisible">
                    <el-form ref="form" :model="form" label-width="100px" size="medium">
                        <el-form-item label="数据集名称">
                            <el-input v-model="form.name" placeholder="请输入数据集名称"></el-input>
                        </el-form-item>
                        <el-form-item label="数据集描述">
                            <el-input type="textarea" v-model="form.description" placeholder="请输入数据集描述"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="open">确 定</el-button>
                    </div>
                </el-dialog>

                <!-- 上传数据集文件弹窗 -->
                <el-dialog title="上传数据集文件" :visible.sync="uploadVisible">
                    <el-alert title="请上传ZIP格式的数据集文件" type="warning" description="请上传ZIP格式的数据集文件" show-icon>
                    </el-alert>
                    <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">请上传ZIP格式的数据集文件</div>
                    </el-upload>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="uploadVisible = false">取消</el-button>
                        <el-button type="primary" @click="uploadVisible = false">上传</el-button>
                    </div>
                </el-dialog>

            </div>
            <div>
                <!-- 操作栏目 -->
                <!-- 根据数据集名称和验证状态查询 -->
            </div>
            <div>
                <!-- 表格展示 -->
                <el-table v-loading="listLoading" :data="datasets" element-loading-text="Loading" border fit
                    highlight-current-row>
                    <el-table-column align="center" label="ID" width="95">
                        <template slot-scope="scope">
                            {{ scope.$index }}
                        </template>
                    </el-table-column>
                    <el-table-column label="数据集名称" width="200" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.name }}
                        </template>
                    </el-table-column>
                    <el-table-column label="描述" width="110" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.description }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="训练样例数" width="110" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.pageviews }}
                        </template>
                    </el-table-column>
                    <el-table-column class-name="status-col" label="验证样例数" width="110" align="center">
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column class-name="status-col" label="验证状态" width="110" align="center">
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="created_time" label="创建时间" width="200">
                        <template slot-scope="scope">
                            <i class="el-icon-time" />
                            <span>{{ scope.row.created_time }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="created_at" label="操作" width="200">
                        <el-button @click="uploadVisible = true">上传</el-button>
                        <el-button @click="verifyDataset(dataset.id)">验证</el-button>
                        <el-button @click="downloadDataset(dataset.id)">下载</el-button>
                        <el-button @click="editDataset(dataset.id)">编辑</el-button>
                        <el-button @click="deleteDataset(dataset.id)">删除</el-button>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
    </div>
</template>

<script>
    import axios from 'axios';

    export default {
        data() {
            return {
                form: {},
                dialogFormVisible: false,
                uploadVisible: false,
                datasets: [],
                uploadFile: null,
                datasetName: ''
            };
        },
        mounted() {
            this.fetchDatasets();
        },
        methods: {
            open() {
                this.dialogFormVisible = false;
                this.$confirm('数据集创建成功，是否立即上传数据集文件?', '提示', {
                    confirmButtonText: '上传',
                    cancelButtonText: '稍后上传',
                    type: 'warning',
                    // center: true
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '请选择文件!'
                    });
                    this.uploadVisible = true
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消上传'
                    });
                });
            },
            fetchDatasets() {
                axios.get('/api/datasets').then(res => {
                    this.datasets = res.data;
                });
            },
            uploadDataset(e) {
                this.uploadFile = e.target.files[0];
            },
            submitUpload() {
                //弹出表单
                this.dialogFormVisible = true

                const formData = new FormData();
                formData.append('file', this.uploadFile);
                formData.append('name', this.datasetName);

                axios.post('/api/datasets', formData).then(() => {
                    this.fetchDatasets();
                });
            },
            deleteDataset(id) {
                axios.delete(`/api/datasets/${id}`).then(() => {
                    this.fetchDatasets();
                });
            }
        }
    };
</script>